<template>
  <div class="DiaryAreaContent">
    <el-input
      v-if="isEdit"
      type="textarea"
      :autosize="{ minRows: 33, maxRows: 33 }"
      placeholder="请输入内容"
      v-model="textarea"
    >
    </el-input>

    <span id="txarea" v-else>
      <p v-for="(item, index) in split" :key="index">{{ item }}。</p>
    </span>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {
      textarea: "",
      number: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(["diaryList", "activeDiary", "isEdit", "editDiary"]),
    // 句号表示一段结束
    split() {
      this.number++;
      this.number--;
      return this.diaryList[this.activeDiary].somecontent.split("。");
    },
  },
  //监控data中的数据变化
  watch: {
    editDiary: {
      handler: function (value, newvalue) {
        this.textarea = this.editDiary;
      },
      immediate: true,
    },
  },
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$bus.$on("saveData", () => {
      this.$store.commit("SETDIARYLISTSOMECONTENT", this.textarea);
      this.textarea = "";
    });
    this.$bus.$on("modifyData", () => {
      this.number++;
      this.$store.commit("SETACTIVEDIARYSOMECONTENT", this.textarea);
      
    });
  },
  updated() {},
};
</script>
<style lang='css' scoped>
.DiaryAreaContent {
  margin: 5px 10px;
  opacity: 0.5;
  border: 1px solid black;
  border-radius: 5px;
  min-width: 1427px;
  /* min-height: 644px; */
  min-height: 770px;
  padding: 30px;
}
#txarea {
  color: black;
  font-weight: 700;
  font-size: 20px;
}
</style>